import { PageContainer } from '@ant-design/pro-layout';
import 'dayjs/locale/zh-cn';
import React, { useState } from 'react';
import { useLocation } from 'umi';
import DetailsTopic from '../topic/components/DetailsTopic';
import TableSubmit from './components/TableSubmit';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const location = useLocation();

  const [visible, setVisibleState] = useState<string>(
    location?.query?.visible ? location.query.visible : 'manage',
  );

  const [visibleData, setVisibleDataState] = useState<DetailsType>({
    id: location.query.id,
    name: location.query.name,
  });

  const onBack = () => {
    setVisibleState('manage');
  };

  const onDetails = (id: string, name: string) => {
    setVisibleState('details');
    setVisibleDataState({ id, name });
  };

  const container = () => {
    if (visible == 'manage') {
      return (
        <PageContainer
          header={{
            breadcrumb: {},
            extra: [],
          }}
          subTitle=""
        >
          <TableSubmit onDetails={onDetails} />
        </PageContainer>
      );
    } else if (visible == 'details') {
      return <DetailsTopic onBack={onBack} id={visibleData?.id} name={visibleData?.name} />;
    }
  };

  return <>{container()}</>;
};
